<!--  线 + 柱混合图 -->
<template>
  <div class="data-box" @click="showBlur = !showBlur">
    <div class="p-3 rounded">
      <svg-icon :icon-class="icon" size="3em" />
    </div>
    <div class="flex flex-col space-y-3">
      <div class="text-[var(--el-text-color-secondary)]">{{ title }}</div>
      <div class="text-lg text-right" v-if="!showBlur">
        {{ formatPrice(value) }}
      </div>

      <div class="text-lg text-right" v-if="showBlur">******</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps } from "vue";
import { formatPrice } from "@/utils/format";
// import { useTransition, TransitionPresets } from "@vueuse/core";

const props = defineProps({
  icon: {
    type: String,
    default: "",
    required: true,
  },
  title: {
    type: String,
    default: "",
    required: true,
  },
  value: {
    type: Number,
    default: 0,
    required: true,
  },
  // duration: {
  //   type: Number,
  //   default: 1000,
  // },
});
const showBlur = ref<boolean>(true);

// const amountOutput = useTransition(props.value, {
//   duration: props.duration,
//   transition: TransitionPresets.easeOutExpo,
// });

onMounted(() => {});
</script>
